﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>SignalR MoveShape Demo - Júnior Pacheco</title>
	<style>
		#shape
		{
			width: 100px;
			height: 100px;
			background-color: #FF0000;
		}
	</style>
</head>
<body>
	<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
	<script src="Scripts/jquery-ui-1.10.3.js" type="text/javascript"></script>
	<script src="Scripts/jquery.signalR-1.1.3.js" type="text/javascript"></script>
	<script src="/signalr/hubs" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			var moveShapeHub = $.connection.moveShapeHub,
                $shape = $("#shape"),
			// Send a maximum of 10 messages per second 
			// (mouse movements trigger a lot of messages)
                messageFrequency = 10,
			// Determine how often to send messages in
			// time to abide by the messageFrequency
                updateRate = 1000 / messageFrequency,
                shapeModel = {
                	left: 0,
                	top: 0
                },
                moved = false;

			moveShapeHub.client.updateShape = function (model) {
				shapeModel = model;
				$shape.css({ left: model.left, top: model.top });
			};

			$.connection.hub.start().done(function () {
				$shape.draggable({
					drag: function () {
						shapeModel = $shape.offset();						
						moved = true;
					}
				});

				// Start the client side server update interval
				setInterval(updateServerModel, updateRate);
			});

			function updateServerModel() {
				// Only update server if we have a new movement
				if (moved) {
					moveShapeHub.server.updateModel(shapeModel);
					moved = false;
				}
			}
		});
	</script>
	<div id="shape">
	</div>
</body>
</html>
